<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>商品查询</title>
</head>
<link rel="stylesheet" href="element-ui-2.13.0/lib/theme-chalk/index.css">
<style>
    .el-header, .el-footer {
        background-color: #B3C0D1;
        color: #333;
        text-align: center;
        line-height: 60px;
    }

    .el-aside {
        background-color: #D3DCE6;
        color: #333;
        text-align: center;
        line-height: 200px;
    }

    .el-main {
        background-color: #E9EEF3;
        color: #333;
        text-align: center;
        line-height: 160px;
    }

    body > .el-container {
        margin-bottom: 40px;
    }

    .el-container:nth-child(5) .el-aside,
    .el-container:nth-child(6) .el-aside {
        line-height: 260px;
    }

    .el-container:nth-child(7) .el-aside {
        line-height: 320px;
    }
</style>
<style rel="stylesheet">
    /* 设置分页组件在右侧显示 */
    .el-pagination{
        text-align: right;
        padding: 15px;
    }
</style>
<body>
<div id="app">
    <!--
    :data： 绑定表格对应的数据
    stripe; 是否斑马纹显示
-->
    <el-table :data="tableData" stripe style="width: 100%">
        <!--
         type="index" ：类型为行的索引
         label： 表头
        注意：索引不是集合中的id
        -->
        <el-table-column type="index" label="序号" width="180"></el-table-column>
        <el-table-column prop="name" label="商品名称" width="180"></el-table-column>
        <el-table-column prop="price" label="价格"></el-table-column>
        <el-table-column prop="stock" label="库存"></el-table-column>
        <el-table-column prop="type.name" label="分类"></el-table-column>
        <el-table-column prop="description" label="描述"></el-table-column>
        <el-table-column label="操作" align="center">
            <!--
                slot-scope：作用域插槽，可以获取表格数据
                scope：代表表格数据(tableData)
                可以通过scope.row来获取表格当前行数据，scope不是固定写法
                @click：绑定vue中的方法
            -->
            <template slot-scope="scope">
                <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">编辑</el-button>
                <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <!--
        分页组件
          @size-change： 当改变每页条数时触发的钩子函数
          @current-change：当改变页码时触发的钩子函数
          current-page ：默认的页码
          :page-sizes：每页条数选择框中显示的值
          :page-size : 默认的每页条数
          layout： 分页组件的布局
              total（总条数）, sizes(每页条数), prev（上一页）, pager(所有的页码), next(下一页), jumper（跳转页码）
          :total: 总条数
    -->
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            current-page="1"
            :page-sizes="[1,3, 5, 8, 10]"
            :page-size="pagination.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pagination.total">
    </el-pagination>
</div>
</body>
<script src="element-ui-2.13.0/lib/index.js"></script>
<script src="js/vue-v2.6.10.js"></script>
<script src="js/axios-0.18.0.js"></script>
<script>
    new Vue({
        el: "#app",
        data:{
            tableData:[] ,// 表格中要展示的数据集合
            pagination:{
                currentPage: 1,
                pageSize:10,
                total: 0
            }
        },
        //钩子函数，在创建vue对象完成后执行
        created(){
            //创建vue后，分页查询数据
            this.findByPage();
        },
        methods: {
            //分页查询
            findByPage(){
                //发送分页查询请求
                //参数包括：当前页和每页条数
                axios.post("/goods/findByPage",this.pagination ).then((res)=>{
                    console.log(res);
                    //请求完成后， 把商品列表赋值给 tableData， elementUi的表格组件会自动展示
                    this.tableData = res.data.result.goodsList;
                    //请求完成后，把总条数赋值 pagination.total， 分页组件会自动展示相应信息
                    this.pagination.total = res.data.result.total;
                }).catch((err)=>{
                    console.log(err);
                });
            },
            //改变每页条数时执行的钩子
            handleSizeChange(pageSize){
                this.pagination.pageSize = pageSize;
                this.findByPage();
            },
            //改变页码时执行的钩子
            handleCurrentChange(currentPage){
                this.pagination.currentPage = currentPage;
                this.findByPage();
            }
        }
    });
</script>
</html>